HTMLify

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --hue: 223;
    --bg: hsl(var(--hue), 90%, 90%);
    --fg: hsl(var(--hue), 90%, 10%);
    --primary: hsl(var(--hue), 90%, 50%);
    --trans-dur: 0.3s;
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}

body {
    background-color: #151515;
    color: var(--fg);
    display: grid;
    height: 100vh;
    place-items: center;
}

.loader {
    display: block;
    width: 8em;
    height: 8em;
}

.rect,
.rect-g {
    animation: pl2-a 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.rect {
    animation-name: pl2-b;
}

.rect-g .rect {
    transform-origin: 20px 128px;
}

.rect-g:first-child,
.rect-g:first-child .rect {
    animation-delay: -0.25s;
}

.rect-g:nth-child(2),
.rect-g:nth-child(2) .rect {
    animation-delay: -0.125s;
}

.rect-g:nth-child(2) .rect {
    transform-origin: 64px 128px;
}

.rect-g:nth-child(3) .rect {
    transform-origin: 108px 128px;
}

@keyframes pl2-a {

    from,
    25%,
    66.67%,
    to {
        transform: translateY(0);
    }

    50% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
        transform: translateY(-80px);
    }
}

@keyframes pl2-b {

    from,
    to {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
        width: 40px;
        height: 24px;
        transform: rotate(180deg) translateX(0);
    }

    33.33% {
        animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
        width: 20px;
        height: 64px;
        transform: rotate(180deg) translateX(10px);
    }

    66.67% {
        animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
        width: 28px;
        height: 44px;
        transform: rotate(180deg) translateX(6px);
    }
}